<template>
  <div>
    <div v-if="deepInfo && deepInfo.id" class="disFlxJS _pt-10">
      <div ref="headInfo">
        <a-descriptions>
          <a-descriptions-item label="场地">
            {{ deepInfo.address }}
          </a-descriptions-item>
          <a-descriptions-item label="开始时间">
            {{ deepInfo.startTime }}
          </a-descriptions-item>
          <a-descriptions-item label="结束时间">
            {{ deepInfo.endTime }}
          </a-descriptions-item>
          <a-descriptions-item label="组数">
            {{ deepInfo.groupVoList.length || 0 }}
          </a-descriptions-item>
          <a-descriptions-item label="已分配/位置总数">
            {{ (headInfo.lockSeatNum || 0) + '/' + (headInfo.maxSeatNum || 0) }}
          </a-descriptions-item>
          <a-descriptions-item label="已排座/报名数">
            {{ (headInfo.assignedNum || 0) + '/' + (headInfo.registerTotalNum || 0) }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="disFlxAC gap-16">
        <a-button type="primary" class="linh-30" icon="plus" :loading="addGroupLoading" @click="openAddGroupModel()">
          {{ addGroupLoading ? '正在新增中...' : '新增组' }}
        </a-button>
        <a-button type="primary" class="linh-30" @click="openSeatArrangementOverview()">
          排座总览
        </a-button>
      </div>
    </div>
    <div v-if="deepInfo && deepInfo.id" class="fz-15 fw-7 disFlxJS">
      <div>
        已排座<span style="color: #FF7D00;">{{ headInfo.assignedNum || 0 }}</span
        >人,已占座<span style="color:#FF7D00;">{{ headInfo.occupySeatNum || 0 }}</span
        >人,未排座
        <span style="color: #FF7D00;">{{ headInfo.notAssignedNum || 0 }}</span>
        人 <a-button size="small" class="_ml-10" @click="$refs.SelectUserModel.openModel(4)">查看分配情况</a-button>
      </div>
      <div>
        已签到 <span style="color: #FF7D00;">{{ headInfo.signNum || 0 }}</span> 人，未签到
        <span style="color: #FF7D00;">{{ headInfo.notSignNum || 0 }}</span> 人
      </div>
    </div>
    <!-- 排座表格 -->
    <SortTable
      :groupList="deepInfo.groupVoList || []"
      :locationRule="deepInfo.locationRule"
      :activityId="activityId"
      :activityArrangeId="deepInfo.id"
      @remove="removeGroup"
      @resetHead="resetHead"
      @modifyGroupSort="handleModifyGroupSort"
      @changePlaceModel="handleChangePlaceModel"
    />
    <!-- 新增组 -->
    <AddGroupModel ref="AddGroupModel" @submit="addGroupSubmit" />
    <!-- 选择人员弹窗 -->
    <SelectUserModel ref="SelectUserModel" :activityId="activityId" :activityArrangeId="deepInfo.id" />
    <!-- 排座总览 -->
    <SeatArrangementOverview ref="SeatArrangementOverviewRef" />
  </div>
</template>

<script>
import SortTable from './sortTable.vue'
import AddGroupModel from './addGroupModel.vue'
import {
  addActivityArrangeGroup,
  getActivityArrangeNum,
  activitySwapArrangeGroup,
  activityChangeSeat
} from '@/api/activity/activity'
import SelectUserModel from './selectUserModel'
import { cloneDeep } from 'lodash-es'
import SeatArrangementOverview from './SeatArrangementOverview.vue'
export default {
  props: {
    activityId: {
      type: Number | String
    },
    info: {
      type: Object,
      default: () => {}
    },
    currentID: {
      type: Number | String
    }
  },
  watch: {
    info: {
      handler(nval) {
        this.deepInfo = cloneDeep(nval)
      },
      deep: true,
      immediate: true
    },
    'info.id'(nval) {
      nval && this.resetHead() // 刷新头部信息
    }
  },
  components: {
    SortTable,
    AddGroupModel,
    SelectUserModel,
    SeatArrangementOverview
  },
  data() {
    return {
      deepInfo: {},
      headInfo: {},
      addGroupLoading: false
    }
  },
  methods: {
    // 打开新增组弹窗
    openAddGroupModel() {
      this.$refs.AddGroupModel.openModel(this.deepInfo.seatNum || 10)
    },
    // 打开排座总览弹窗
    openSeatArrangementOverview() {
      this.$refs.SeatArrangementOverviewRef.openModel(this.currentID)
    },
    /** 修改组排序 */
    handleModifyGroupSort(form) {
      const { oldSort, newSort } = form;
      // 如果位置相同，无需移动
      if (newSort === oldSort) {
        return
      }
      const data = cloneDeep(this.deepInfo.groupVoList)
      
      // 找到要移动的项
      const itemIndex = data.findIndex(item => item.serialNumber === oldSort)
      const item = data[itemIndex]
      
      // 根据移动方向决定操作顺序
      if (newSort > oldSort) {
        // 从低位向高位移动，先删除后插入
        data.splice(itemIndex, 1)
        const newIndex = data.findIndex(item => item.serialNumber > newSort)
        data.splice(newIndex === -1 ? data.length : newIndex, 0, item)
      } else {
        // 从高位向低位移动，先插入后删除
        const newIndex = data.findIndex(item => item.serialNumber >= newSort)
        data.splice(newIndex, 0, item)
        data.splice(itemIndex + 1, 1)
      }

      activitySwapArrangeGroup({ ids: data.map(v => v.id) }).then(res => {
        this.$message.success('修改成功')
        this.$emit('refresh')
      })
    },

    handleChangePlaceModel(form) {
      activityChangeSeat(form).then(res => {
        this.$message.success('交换成功')
        this.$emit('refresh')
      })
    },

    // 确定新增组
    async addGroupSubmit(form) {
      const _this = this
      _this.$refs.AddGroupModel.closeModel()
      _this.addGroupLoading = true
      try {
        await addActivityArrangeGroup({ ...form, activityArrangeId: _this.deepInfo.id })

        _this.$emit('refresh')
        _this.resetHead() // 刷新头部信息
        _this.$message.success('新增组成功')

        setTimeout(() => {
          _this.addGroupLoading = false
        }, 500)
      } catch (error) {
        _this.addGroupLoading = false
      }
    },
    // 删除分组
    removeGroup(groupId, currentData) {
      let _newList = this.deepInfo.groupVoList.filter(v => v.id !== groupId)
      this.deepInfo.groupVoList = cloneDeep(_newList)
    },
    // 刷新头部信息
    resetHead() {
      getActivityArrangeNum({ activityArrangeId: this.deepInfo.id }).then(res => {
        this.headInfo = JSON.parse(JSON.stringify(res.data))
        console.log('我刷新啦', this.headInfo)
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
